<template>
  <div style="padding: 20px 0;">
    <div>
      <el-divider><span style="color: #C0C4CC; cursor: pointer;" @click="approvalSectionVisible = 1-approvalSectionVisible"
      >{{ approvalSectionVisibleText[approvalSectionVisible] }}</span></el-divider>
    </div>
    <div v-show="approvalSectionVisible" style="padding-top: 20px">
      <approval-process-schedule-chart v-if="!autoConfigure" ref="precessChart" :businessId="businessId" :moduleKey="moduleKey"></approval-process-schedule-chart>
      <approval-process-history-chart v-else ref="precessChart" :instanceId="instanceId"></approval-process-history-chart>
      <approval-history-list :business-key="moduleKey+'#'+businessId" ref="historyList"></approval-history-list>
    </div>
  </div>
</template>

<script>
import ApprovalProcessScheduleChart from '@/components/ApprovalHistory/ApprovalProcessScheduleChart'
import ApprovalProcessHistoryChart from '@/components/ApprovalHistory/ApprovalProcessHistoryChart'
import ApprovalHistoryList from '@/components/ApprovalHistory/ApprovalHistoryList'
import { historyFromData } from "@/api/activiti/historyFormdata";

export default {
  name: 'ApprovalHistory',
  components: {
    ApprovalProcessScheduleChart, ApprovalProcessHistoryChart, ApprovalHistoryList
  },
  props: {
    moduleKey: {
      required: true,
      type: String
    },
    businessId: {
      required: true,
      type: Number
    },
    instanceId: {
      required: false,
      type: String,
      default: ''
    },
    autoConfigure: {
      required: false,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      //审批信息显示标志
      approvalSectionVisible: 0,
      //审批信息显示提示语
      approvalSectionVisibleText: ['展开审批信息', '收起审批信息']
    }
  },
  methods: {
    init(businessId) {
      if(!businessId) {
        businessId = this.businessId;
      }
      const _this = this;
      historyFromData(this.moduleKey + "#" + businessId).then(response => {
        _this.$refs['historyList'].approvalHistoryList = response.data
      }).then(function() {
        _this.$refs['precessChart'].init();
      });
    }
  }
}
</script>

<style scoped>

</style>
